<template>
  <div class="system-management">
    <h2>系统管理</h2>
    <!-- <p>这里是系统管理页面，用于管理用户、权限、系统配置等。</p>
    
    <el-tabs v-model="activeTab">
      <el-tab-pane label="用户管理" name="users">
        <el-table :data="userData" style="width: 100%" border>
          <el-table-column prop="username" label="用户名" width="120"></el-table-column>
          <el-table-column prop="realName" label="真实姓名" width="120"></el-table-column>
          <el-table-column prop="role" label="角色" width="120"></el-table-column>
          <el-table-column prop="status" label="状态" width="100">
            <template slot-scope="scope">
              <el-tag :type="scope.row.status === '正常' ? 'success' : 'danger'">
                {{ scope.row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="lastLogin" label="最后登录" width="150"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="primary">编辑</el-button>
              <el-button size="mini" type="danger">禁用</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      
      <el-tab-pane label="角色管理" name="roles">
        <el-table :data="roleData" style="width: 100%" border>
          <el-table-column prop="roleName" label="角色名称" width="150"></el-table-column>
          <el-table-column prop="description" label="描述"></el-table-column>
          <el-table-column prop="userCount" label="用户数量" width="100"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="primary">编辑权限</el-button>
              <el-button size="mini" type="warning">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      
      <el-tab-pane label="系统配置" name="config">
        <el-form :model="configForm" label-width="120px">
          <el-form-item label="系统名称">
            <el-input v-model="configForm.systemName"></el-input>
          </el-form-item>
          <el-form-item label="物业公司">
            <el-input v-model="configForm.companyName"></el-input>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="configForm.phone"></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="configForm.address"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">保存配置</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs> -->
  </div>
</template>

<script>
export default {
  name: 'SystemManagement',
  data() {
    return {
      activeTab: 'users',
      userData: [
        { username: 'admin', realName: '管理员', role: '超级管理员', status: '正常', lastLogin: '2024-01-15 09:30' },
        { username: 'shangtu', realName: '商途', role: '管理员', status: '正常', lastLogin: '2024-01-14 14:20' },
        { username: 'user1', realName: '张三', role: '普通用户', status: '正常', lastLogin: '2024-01-13 16:45' }
      ],
      roleData: [
        { roleName: '超级管理员', description: '拥有所有权限', userCount: 1 },
        { roleName: '管理员', description: '拥有大部分管理权限', userCount: 2 },
        { roleName: '普通用户', description: '基本查看权限', userCount: 10 }
      ],
      configForm: {
        systemName: '智慧物业管理系统',
        companyName: '某某物业管理有限公司',
        phone: '400-123-4567',
        address: '北京市朝阳区某某街道123号'
      }
    }
  }
}
</script>